@import url('./style');
#footer{
  >div.pc-show{
    background-color: @systemColor;
    .footer-list{
      width: 1280 * @px1;
      margin: auto;
      padding: 35 * @px1 0;
      .list-left{
        >ul{
          >li{
            padding-left: 70 * @px1;
            ul{
              li{
                margin-top: 15 * @px1;
                h2{
                  a{
                    font-size: 16 * @px1;
                    line-height: 1;
                    display: block;
                    color: white;
                  }
                }
                >p{
                  a,span{
                    font-size: 13 * @px1;
                    color: #999999;
                    line-height: 1;
                    display: block;
                    cursor: pointer;
                  }
                  a:hover,
                  span:hover{
                    color: white;
                  }
                }
              }
              li:first-child{
                margin-top: 0;
              }
              li:not(:first-child){
                margin-top: 15 * @px1;
              }
            }
          }
          >li:first-child{
            padding-left: 15 * @px1;
          }
        }
      }
      .list-right{
        .logo{
          position: relative;
          img{
            position: absolute;
            width: 60 * @px1;
            display: block;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
          }
          p{
            font-size: 26 * @px1;
            line-height: 1;
            font-weight: 600;
            padding: 25 * @px1 0;
            padding-left: 70 * @px1;
            color: white;
          }
        }
      }
    }
    .footer-note{
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      >div.note-box{
        width: 90%;
        margin: auto;
        padding: 10 * @px1 0;
        >div{
          a,p{
            color: white;
            font-size: 12 * @px1;
            line-height: 1;
            display: block;
            margin-left: 20 * @px1;
          }
          a:first-child,
          p:first-child{
            margin: 0;
          }
        }
      }
    }
  }
  >div.mobile-show{
    display: none;
    .footer-note{
      background-color: #eeeeee;
      padding: 20 * @px1 0;
      p{
        color: #333333;
        line-height: 1;
        font-size: 12 * @px1;
        a{
          display: inline-block;
          vertical-align: middle;
          color: #707070;
        }
      }
      p:last-child{
        margin-top: 15 * @px1;
      }
    }
    .tab-bar{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #af2b25;
      z-index: 10;
      ul{
        li{
          width: 50%;
          a{
            font-size: 16 * @px1;
            line-height: 1;
            color: white;
            display: block;
            padding: 15 * @px1 0;
            i{
              display: block;
              font-size: 22 * @px1;
              margin-bottom: 10 * @px1;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1340px) {
  #footer{
    >div.pc-show{
      .footer-list{
        width: 1000 * @px1;
        .list-left{
          >ul{
            >li{
              padding-left: 40 * @px1;
            }
            >li:first-child{
              padding-left: 15 * @px1;
            }
          }
        }
        .list-right{
          .logo{
            img{
              width: 50 * @px1;
            }
            p{
              font-size: 16 * @px1;
              padding-left: 60 * @px1;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1130px) {
  #footer{
    >div.pc-show{
      .footer-note{
        >div.note-box{
          >div{
            a,p{
              margin-left: 10 * @px1;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1030px) {
  #footer{
    >div.pc-show{
      .footer-list{
        width: 900 * @px1;
        .list-left{
          >ul{
            >li{
              padding-left: 50 * @px1;
            }
          }
        }
        .list-right{
          display: none;
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  #footer{
    >div.pc-show{
      .footer-list{
        width: 800 * @px1;
      }
    }
  }
}
@media (max-width: 850px) {
  #footer{
    >div.pc-show{
      .footer-note{
        >div.note-box{
          >div:first-child{
            float: none;
            font-size: 0;
            p,a{
              float: none;
              display: inline-block;
              vertical-align: middle;
            }
          }
          >div:last-child{
            display: none;
          }
        }
      }
    }
  }
}
@media (max-width: 800px) {
  body{
    padding-bottom: 78 * @px1 !important;
    #footer{
      >div.pc-show{
        display: none;
      }
      >div.mobile-show{
        display: block;
      }
    }
  }
}